<template>


  <div class="bottom-right-container">
    <i class="bottomL"></i>
    <i class="bottomR"></i>
    <div class="title_style">
      <div style="width: 3px;height: 20px;background-color: #E68D22;margin-right: 10px;margin-top: 10px">
      </div>
      <div>
        信息趋势图
      </div>
    </div>

    <LineChartTransparentBackground
      :height="height"
      :optionLegend="optionLegendSentiments"
      :optionSeries="optionSeriesSentiments"
      :optionXAxisData="optionXAxisDataSentiments"
      :optionTitleText="''"/>

  </div>
</template>

<script>
  import LineChartTransparentBackground from '@/components/Echarts/LineChartTransparentBackground'
  import {  getSentimentByPublishTime, } from "@/api/system/opinion";
  export default {
    name: 'BottomLeftCmp',
    components: {
      LineChartTransparentBackground
    }
    ,data(){
      return{
        height:'280px',
        optionLegendSentiments: ["正面", "中性", "负面"],
        optionSeriesSentiments: [],
        optionXAxisDataSentiments: [],
      }
    },created() {
      this.getSentimentByPublishTime()
    },methods:{
      getNextDate(date, day) {
        var dd = new Date(date);
        dd.setDate(dd.getDate() + day);
        var y = dd.getFullYear();
        var m = dd.getMonth() + 1 < 10 ? "0" + (dd.getMonth() + 1) : dd.getMonth() + 1;
        var d = dd.getDate() < 10 ? "0" + dd.getDate() : dd.getDate();
        return y + "-" + m + "-" + d;
      },
      dateFtt(fmt, date) {
        var o = {
          "M+": date.getMonth() + 1,     //月份
          "d+": date.getDate(),     //日
          "h+": date.getHours(),     //小时
          "m+": date.getMinutes(),     //分
          "s+": date.getSeconds(),     //秒
          "q+": Math.floor((date.getMonth() + 3) / 3), //季度
          "S": date.getMilliseconds()    //毫秒
        };
        if (/(y+)/.test(fmt))
          fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o)
          if (new RegExp("(" + k + ")").test(fmt))
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        return fmt;
      },
      getSentimentByPublishTime() {
        getSentimentByPublishTime({
          beginPublishDay: this.getNextDate(this.dateFtt("yyyy-MM-dd", new Date()), -7),
          endPublishDay: this.dateFtt("yyyy-MM-dd", new Date()),
        }).then(response => {
          this.optionSeriesSentiments = []
          this.optionXAxisDataSentiments = []
          let list = response.rows
          let zm = {
            name: '正面',
            type: 'line',
            data: [],
            lineStyle: {
              "color": "#3ba272",
              // "width": 4,
              // "type": "dashed"
            },
          }
          let zx = {
            name: '中性',
            type: 'line',
            data: [],
            lineStyle: {
              "color": "#545454",
            },
          }
          let fm = {
            name: '负面',
            type: 'line',
            data: [],
            lineStyle: {
              "color": "#ee6666",
            },
          }
          let zmlist = []
          let zxlist = []
          let fmlist = []
          list.forEach(item => {
            this.optionXAxisDataSentiments.push(item.name);
            let zmnum = 0
            let zxnum = 0
            let fmnum = 0
            item.value.forEach(i => {
              if (i.name == 'ispositive') {
                zmnum = i.value
              }
              if (i.name == 'isneutral') {
                zxnum = i.value
              }
              if (i.name == 'isnegative') {
                fmnum = i.value
              }
            })
            zmlist.push(zmnum)
            zxlist.push(zxnum)
            fmlist.push(fmnum)
          })
          zm.data = zmlist
          zx.data = zxlist
          fm.data = fmlist
          this.optionSeriesSentiments.push(zm)
          this.optionSeriesSentiments.push(zx)
          this.optionSeriesSentiments.push(fm)

        });
      },

    }
  }
</script>

<style lang="less" scoped>

  .bottom-right-container {
    padding: 10px;
    background-color: rgba(6, 30, 93, 0.5);
    box-sizing: border-box;
    height: 100%;
    position: relative;
  }

  .bottomL{width:20px;
    height:20px;
    border-bottom-width:2px;
    border-bottom-color:#26c6f0;
    border-bottom-style:solid;
    border-left-width:2px;
    border-left-color:#26c6f0;
    border-left-style:solid;
    position: absolute;
    bottom:-2px;
    left:-2px}
  .bottomR{
    width:20px;
    height:20px;
    border-bottom-width:2px;
    border-bottom-color:#26c6f0;
    border-bottom-style:solid;
    border-right-width:2px;
    border-right-color:#26c6f0;
    border-right-style:solid;
    position:absolute;
    bottom:-2px;
    right:-2px}


  .title_style {
    display: flex;
    color: #00CCFF;
    font-weight: bold;
    padding-left: 10px;
    line-height: 40px;
    width: 100%;
    height: 40px;
    background-size: 100% 100%;
    background-image: url("../../../assets/images/datav/title_bg.png");
  }


</style>
